<template>
	<view class="user">
		<mx-navbar title="会员中心" :background="is_show_head ? '#fff' : `transparent`"
			:text_color="is_show_head ? '#000' : 'transparent'" :isClearFixed="false"></mx-navbar>
		<view class="ubody">
			<view class="m1">
				<image class="mi-bg" :src="$store.user_info?.bg || '/static/bg.jpg'">
				</image>
			</view>
			<user-info></user-info>
			<user-balance :sta_info="sta_info"></user-balance>
			<user-order :sta_info="sta_info"></user-order>
			<user-service></user-service>
		</view>

		<mx-special v-model="pn" :scroll_top="sh"></mx-special>
	</view>
</template>

<script setup>
import userInfo from "./com/user-info.vue"
import userBalance from "./com/user-balance.vue"
import userService from "./com/user-service.vue"
import userOrder from "./com/user-order.vue"

const {
	proxy
} = getCurrentInstance()

const user = ref({
	bg: ''
})
onShow(() => {
	setTimeout(() => {
		getContentHeight()
	}, 300);
	if(proxy.$store.token) {
		getData()
	}
})


const pn = ref(1)
onReachBottom(() => {
	pn.value += 1
})
let top = uni.upx2px(420 - 80)
const is_show_head = ref(false)
onPageScroll((e) => {
	is_show_head.value = e.scrollTop >= top
})


const sh = ref(0)
function getContentHeight() {
	const query = uni.createSelectorQuery().in(proxy)
    query
        .select(`.ubody`)
        .boundingClientRect((res) => {
			sh.value = res&&(res.height-proxy.$hh)
        })
        .exec()
}

const sta_info = ref({})
async function getData() {
	let res = await proxy.$api('UserCenter', {})
    if (res.code === 0) {
        sta_info.value = res.data || []
    }
}
</script>

<style lang="scss" scoped>
.user {
	min-height: 100vh;
	background: #f3f9ff;

	.m1 {
		width: 100%;
		height: 420rpx;

		.mi-bg {
			width: 100%;
			height: 100%;
		}
	}

	.m2 {
		width: 100%;
		height: 240rpx;
		padding: 0 20rpx;

		.mi-bg {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}
}
</style>